<template>
	<view class="detail">
		<uni-forms :modelValue="formData" ref='form' label-position="top" label-width='100'>
			<uni-forms-item label="标题">
				<view style="display:flex">
					<uni-easyinput type="text" style="flex:1;margin-right: 10px;" v-model="formData.title" disabled />
					<button class="copy" @click="copy(formData.title)" type="primary">复制</button>
				</view>
			</uni-forms-item>
			<uni-forms-item label="内容">
				<uni-easyinput type="textarea" v-model="formData.content" disabled />
				<button class="copy" style="margin-top:10px" @click="copy(formData.content)" type="primary">复制</button>
			</uni-forms-item>
			<uni-forms-item label="小红书账号" name="content">
				<uni-card title="基础卡片" sub-title="副标题" thumbnail="https://picsum.photos/30">
				</uni-card>
			</uni-forms-item>
			<uni-forms-item label="笔记地址" name="url">
				<uni-easyinput type="text" v-model="formData.url" placeholder="请输入笔记地址" />
			</uni-forms-item>
			<uni-forms-item label="笔记截图" name="image">
				<uni-file-picker 
					v-model="formData.image"  
					file-mediatype="image"
					mode="grid"
					file-extname="png,jpg"
					:limit="3"
					@success="success" 
					@select="select"
				/>
			</uni-forms-item>
			<button type="primary" style="height: 35px;line-height: 35px;" @click="submit('form')">提交</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		upload,
	} from '@/api/api';
	export default {
		data() {
			return {
				formData:{
					title:"标题标题",
					content:"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容",
					url:'',
					image:[]
				}
			};
		},
		methods: {
			copy(content){
				navigator.clipboard.writeText(content)
				this.$util.Tips({
					title: '复制成功',
					icon: 'success'
				})
			},
			success(progress,index,tempFile,tempFiles,tempFilePaths){
				console.log(progress,index,tempFile,tempFiles,tempFilePaths)
			},
			select(file){
				console.log(file)
				uni.uploadFile({
					url: "common/upload",
					files: file.tempFiles,
					fileType:"image",
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.detail{
		padding:15px
	}
	.copy{
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.9rem;
		min-height: 37px;
	}
	/deep/.uni-card__content{
		display: none;
	}
	/deep/.uni-card{
		padding: 0!important;
		margin: 0!important;
	}
	/deep/.uni-forms-item{
		margin-bottom: 15px;
	}
	/deep/.uni-forms-item__label span{
		font-size: 1rem!important;
	}
</style>
